<template>
  <div class="contend accompanyContend">
    <div class="container">
      <div class="topTitleTab">
        <span>当前位置：首页 > 陪练</span>
      </div>
      <div class="contendBox">
        <div class="left">
          <div class="formBox">
           <formSearch :filteroptions='filterOptions.filter' :sortTypeList='filterOptions.order' @search='fliterSearch'
          
            ></formSearch>
          </div>
          <div class="listBox">

             <coachItem   v-if="coachList.length > 0" v-for="(accompanyItem, i) in coachList" :coachitem='accompanyItem' :iscoach='false'
              :key="i"></coachItem>
             <el-pagination
              v-if="coachList.length > 0"
              @size-change="handleSizeChange"
              :current-page.sync="page"
              @current-change="handleCurrentChange"
              :page-sizes="[10, 20]"
              :page-size="10"
              background
              layout="total, sizes, prev, pager, next"
              :total="pagination.total"
            >
            </el-pagination>
             <div class="nodataBox" v-if="coachList.length == 0">
              <img src="~/assets/images/nodata.png" alt="" />
              <span class="tips">暂无数据</span>
            </div>
          </div>
        </div>
        <div class="right">
            <div class="cardBox"  v-if="schoolListQw.length>0">
            <div class="title">
              <span>推荐驾校 </span>
            </div>
            <div class="cardContend">
                    <div
                class="authority"
                v-for="(authority, i) in schoolListQw"
                :key="i"
              >
                <div class="authorityleft">
                  <span :class="i > 2 ? 'soltNum soltNumnor' : 'soltNum'">{{
                    i + 1
                  }}</span>
                  <nuxt-link :to="{name:'school-schoolDetails-id',query: { schoolId: authority.id}}">
                    <span v-if="i != 0" class="curp">{{
                      authority.short_title
                    }}</span>
                  </nuxt-link>
                </div>
                <span class="people" v-if="i != 0"
                  >{{ authority.sCount }}人</span
                >
                <div class="right" v-if="i == 0">
                  <img :src="authority.head_img" alt="" class="schoolImg" />
                  <div class="content firstContent">
                    <nuxt-link  :to="{name:'school-schoolDetails-id',query: { schoolId: authority.id}}">
                      <span class="contenttitle curp">{{
                        authority.short_title
                      }}</span>
                    </nuxt-link>
                    <div class="starBox">
                      <img
                        src="~/assets/images/rankstar.png"
                        alt=""
                        v-for="num in authority.cAvg"
                        :key="num"
                      />
                      <img v-if="authority.cAvg<5" src="~/assets/images/rankstarhui.png" alt=""  v-for="num in (5-authority.cAvg)"
                        :key="num">
                    </div>
                    <span class="tips">{{ authority.address }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="cardBox"  v-if="sortCoachList.length>0">
            <div class="title">口碑教练排行榜</div>
            <div class="card">
              <sortCoach
                v-for="(item, i) in sortCoachList"
                :key="i"
                :coachItem="item"
                :sortNum="i"
              ></sortCoach>
            </div>
          </div>
          
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import formSearch from "@/components/formSearch.vue";
import sortCoach from "@/components/sortCoach.vue";
import { coach, cityfilter,school } from "~/api/commen";
import coachItem from "@/components/coachItem.vue";
export default {
  components: {
    formSearch,
    sortCoach,
    coachItem
  },
  data() {
    return {
      cityList: [],
      quyuList: [{ title: "不限", id: null }],
      page: 1,
      rows: 10,
    };
  },

   async asyncData({ app, query, params }) {
    let [sortCoachList, coachList,schoolListQw] = await Promise.all([
      await coach({ page: 1, rows: 5, order: "score"}),
      await coach({ page: 1, rows: 10 ,coachType:'train'}),
      await school({ page: 1, rows: 5 })
    ]);
    return {
      sortCoachList: sortCoachList.list,
      pagination: coachList.page,
      coachList: coachList.list,
      schoolListQw:schoolListQw.list,
      filterOptions:coachList.filterOption,

    };
  },
  methods: {
      handleSizeChange(val) {
      this.rows = val;
      this.getcoach();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getcoach();
    },
    //驾校
    async getcoach(formSearch) {
       let params={page: this.page, rows: this.rows,coachType:'train'}
      if(formSearch){
        params=Object.assign(params,formSearch)
      }
      let data = await coach(params);
      this.coachList = data.list;
      this.pagination = data.page;
    },
     fliterSearch(formSearch){
      this.getcoach(formSearch)
    }
  },
};
</script>

<style scoped lang='scss'>
@import "~/assets/css/accompany.scss";
::v-deep {
  .el-pagination {
    display: flex;
    justify-content: flex-end;
  }
}
</style>